import React, { PureComponent } from 'react';
import { StyleSheet, Text, Animated, Dimensions } from 'react-native';

export default class SatToast extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            zIndex: new Animated.Value(-99),
            boxOpacity: new Animated.Value(0), // 透明度初始值
        };
        this._animateHandler = null;
    }

    componentWillUnmount() {
        if (this._animateHandler) {
            this._animateHandler.stop();
        }
    }

    showToast = list => {
        if (!list.length) {
            return;
        }
        this.setState({
            list
        });
        if (this._animateHandler) {
            this._animateHandler.stop();
            this._animateHandler = null;
            this.startAnimate();
        } else {
            this.startAnimate();
        }
    };

    hide(){
        if (this._animateHandler) {
            this._animateHandler.reset();
            this._animateHandler = null;
        }
    }

    showToastWithTitle = obj => {
        if (!obj) {
            return;
        }
        this.setState({
            text: obj.text,
            title: obj.title
        });
        if (this._animateHandler) {
            this._animateHandler.stop();
            this._animateHandler = null;
            this.startAnimate();
        } else {
            this.startAnimate();
        }
    };

    /**
     * 展示一秒后关闭 toast
     *
     */
    startAnimate = () => {
        this.state.zIndex.setValue(999);

        this._animateHandler = Animated.sequence([
            Animated.timing(this.state.boxOpacity, {
                toValue: 1,
                duration: 200,
                useNativeDriver:true
            }),
            Animated.delay(3000), // 延迟执行
            Animated.timing(this.state.boxOpacity, {
                toValue: 0,
                duration: 200,
                useNativeDriver:true
            }),
            Animated.timing(this.state.zIndex, {
                toValue: -99,
                useNativeDriver:true
            })
        ]);

        this._animateHandler.start(({ finished }) => {
            if (finished) {
                this.setState({
                    list: []
                });
                if (this.props.onEnd) {
                    this.props.onEnd();
                }
            }
        }); // 开始执行动画;
    };

    render() {
        const { height } = Dimensions.get('window');

        return (
            <Animated.View
                style={[
                    styles.box,
                    {
                        zIndex: this.state.zIndex,
                        opacity: this.state.boxOpacity,
                        paddingHorizontal:  10 ,
                        marginHorizontal: 15
                    },
                    { top: height / 2 - 25 },
                    this.props.style
                ]}
            >
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <Text
                                key={index.toString()}
                                style={{
                                    ...styles.text,
                                    fontSize:  12,
                                    // textAlign:'center'
                                }}
                            >
                                {item}
                            </Text>
                        )
                    })
                }

            </Animated.View>
        );
    }
}

const styles = StyleSheet.create({
    box: {
        position: 'absolute',
        paddingTop: 15,
        paddingLeft: 20,
        paddingRight: 20,
        paddingBottom: 15,
        alignSelf: 'center',
        backgroundColor: 'rgba(0,0,0,0.6)',
        borderRadius: 4
    },
    centering: {
        // alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 10
    },
    text: {
        color: '#fff',marginBottom:3
    },
    title: {
        fontSize: 15,
        textAlign: 'center',
        color: '#fff',
        marginBottom: 20
    }
});

/**
 * 用法

 toastRef.showToast('xxx');
 */
